import * as React from "react";
import { Row, Col } from "antd";
import { DtPowerDevice } from "../Condition";

export interface DTTableProps {
  device: DtPowerDevice;
  lastData: any;
}

export interface DTTableState {}

class DTTable extends React.Component<DTTableProps, DTTableState> {
  render() {
    return (
      <Row>
        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">{this.props.device.name}</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">编号:</div>
              <div className="col-md-24 val">{this.props.device.no}</div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">地址:</div>
              <div className="col-md-24 val">{this.props.device.devAddr}</div>
            </div>
          </div>
        </Col>

        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">电压(V)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.VOLTAGE.phaseA : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.VOLTAGE.phaseB : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.VOLTAGE.phaseC : ""}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">电流(A)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.CURRENT.phaseA : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.CURRENT.phaseB : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.props.lastData ? this.props.lastData.CURRENT.phaseC : ""}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">功率因数()</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.POWER_FACTOR.phaseT
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.POWER_FACTOR.phaseA
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.POWER_FACTOR.phaseB
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.POWER_FACTOR.phaseC
                  : ""}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">有功功率(kW)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.ACTIVE_POWER.phaseT
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.ACTIVE_POWER.phaseA
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.ACTIVE_POWER.phaseB
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.ACTIVE_POWER.phaseC
                  : ""}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={8}
          md={8}
          lg={8}
          xl={4}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">无功功率(kW)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.REACTIVE_POWER.phaseT
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.REACTIVE_POWER.phaseA
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.REACTIVE_POWER.phaseB
                  : ""}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.props.lastData
                  ? this.props.lastData.REACTIVE_POWER.phaseC
                  : ""}
              </div>
            </div>
          </div>
        </Col>
      </Row>
    );
  }
}

export default DTTable;
